::|CONTENTS
- TotT - Tools of teh Tradedom
- B.B. - The Bare Basics
- PDaU - Palettes, Dithering, and You!
- SpTW - Sprite the World
- TLHH - Technical Limits and How to Harness Them
- PotS - Peak of the Summit
- Additional Resources
- See Also
Hey, you! Yeah,
YOU.
You see a
pixel XHB over there, right? One of the oldest
formats on BotB, and a really popular one at that...what's that? You wanna do some pixel art? Think it sounds like a blast to do?! You've come to the right place!!
This page serves as a starter's guide to pixel art. It is iteration ]|[ (3) of this guide, with iteration I (1) started by
brightentayle and iteration ][ (2) continued on by
Galak Sea. Unlike those two, this is a COMPLETE REFACTORING of the entire page, designed to make it much more up-to-date and less confusingly structured than the previous iterations. That's not to mention finally making it feel complete and replacing the broken resources with some that work.
(...for the time being, anyway =w=;)
This is gonna be a long page. It's essentially split up into 'units' with exercises for you to try at the end of most of them. I wanted this to more or less feel like a textbook on the basics of pixel art, with the resources and exercises being the further reading and homework respectively. Of course,
you don't have to follow any of the exercises but they're there in case you want to test yourself. Self schooling for the win, after all.
So, come! This is a guide on all things pixel art: from the bare basics to the peak of the summit!
TotT - Tools of teh Tradedom
First and foremost, we need to get your tools together. Some pixel artists prefer other tools, so take these as options rather than recommendations. There's no real correct option, after all; only what you're most comfy with!
Photomanipulation Tools
I call them these because that's essentially what they are. When starting out, often the instinct is to continue using what you've been using for art or use a popular, powerful (often free) program to start off. This puts the user in a familiar environment if they're the former. Personally, I would only use it for those "growing pain" moments - that is to say, get comfortable with pixel art within it before moving on to one of the tools below. Some of these tools include:
- Adobe Photoshop (paid)
- GIMP (free)
- Paint.NET (free)
Aseprite and Libresprite
Aseprite is often considered
the pixel art tool in some circles. A good chunk of pixel artists use it, it's (relatively) cheap, it's overall a very handy pixel art workstation and has a lot of really helpful tools for pixel artists like a readable animation timeline and pixel perfect stroke and more!! The biggest drawback it has going for it is that it's only available for PC's, so mobile users need another method. That, and it's got a price: US$20, which could make or break it for a lot of people reading this.
Luckily, Aseprite has a cousin that sorta solves both of those:
LibreSprite! While not as up to date as the real Aseprite, LibreSprite stands out by being free and having ports to Android devices and web browsers. It even has a really adorable start up mural! It should be noted that it is still in active development and might not be entirely compatible with Aesprite, especially with the latest versions of both programs. (The web browser feature, for example, is a part of LibreSprite's as-of-currently prerelease v1.2, so it might be especially unstable)
With that said, both tools are especially beginner friendly and super popular! It's worth it to try out either one:
Aesprite Home Page
LibreSprite Home Page
LibreSprite Web Version
GrafX2
GrafX2 is a pixel painting program that's been in development since the mid 1990s, inspired by Deluxe Paint by Electronic Arts and Brilliance by Digital Creations. In fact, versions as late as 2.8 and 2.9 support OSes such as Amiga OS 3.x and Atari MiNT, respectively. As well, it hosts a number of modern-inspired features - smearing, airbrushes, gradients, etc. - alongside more retro-adjacent tricks - unusual screen mode support, drawing modes that replicate certain computer constraints, etc.
It's certainly a very powerful workstation for pixel art, though that power does make it quite unintuitive. Put simply: you're gonna need to know what shortcuts do in this program. However, if that doesn't deter you and the features have got you hooked, give it a try!
GrafX2 Home Page
Pixaki
Well, hey! Another answer to having a mobile Aseprite! While
Pixaki doesn't have a lot of features to boast, it does boast the most polished pixel crafting experience on iPad with it's nice, scrubbable timeline and onion skinning. Additionally, it has the option to export into an Aseprite project file so that any potential collaborators can still work on it despite using different programs. Unfortunately, it's only on iPad devices, so no Android version. :(
It costs the same as Aseprite on the App Store, but also has a feature-limited free edition for those wanting to try it out!
B.B. - The Bare Basics
Now that you have gotten your tools all set, it's time to get started making your first pixel art! For brevity's sake, this tutorial is going to assume you have an innate knowledge of how art operates (Elements of Art, Principles of Design, etc.) and jump straight into...
What is Pixel Art?
Of course, you have an idea of what pixel art already, but it's always nice to give a definition for everyone.
Pixel art, also known as
dot art or
lo-res art, is art done at low resolutions - enough where individuals pixels (squares of light) can be picked out by the viewer. Pixel art was popularized via retro computers and game consoles, whose constraints couldn't allow for more color or resolution. In turn, however, it proved to be an effective creative restraint and a simple process to follow.
Pixel art is defined by the pixels that make it: as beings of cognitive thought, we have the ability to interpret and imagine. Well-crafted pixel art signifies the image in our head and not only allow our brains enough space to interpret it as such, but leaves room for the imagination to go wild with it - to be inspired by it, for example. Mega Man's sprite from the NES and Game Boy games is a good example of this; there's enough for us to recognize the image as Mega Man, but enough as well to imagine more from that image. Of course, you can extrapolate that logic into further discussion about how any assortment of colors can represent something if they're familiar enough - cue the Simpsons as 1px wide lines of varying heights - but that's getting off track.
Point is: pixel art is inherently simple. When you boil it down to its essentials, it's basically filling squares in grid paper with colored pencils. Therefore, well made pixel art takes advantage of both the simplicity and limitations to create something that inspires something within someone.
Tools of teh Tools of teh Tradedom
Most, if not all, of the tools mentioned in the first section usually have the same tools in them. They are:
Pencil - draw a freeform line
Line - draw a straight line
Shape - draw a shape, whether it be a rectangle, an oval, or a polygonal shape
Fill Bucket - fill a clicked area with a color
Select - select an area of pixel art
Move - move pixel art or selection by dragging (click + move) across screen
Eraser - erase pixels (left click) or draw a freeform line with the background color (right click)
These Seven Tools of the
Bandit Pixel Artist are the ones you'll probably come back to time and time again, mainly due to the simplicity of pixel art. While an artist's approach will most certainly differ, pixel art itself does not necessitate complex artistic manipulation such as smears, blending or distortion. Someone
could do that if they so wished, but that is entirely up to the artist. Pixel art's simplicity lies in how much can be done with just this set of tools.
Lines and Curves
Pixel art relies on the arrangement of pixels into lines and curves. Thus, pixel art emphasizes the structure of the pixels being placed, in result changing how lines are thought of in comparison to traditional art. I.e, lines should be thought of as segments of pixels coming together to make one cohesive line. A pattern, if you will.
Straight lines follow pretty simple repeating patterns of pixel segments. For example, a straight diagonal could be constructed by a pattern of vertical 2px lines, each one pixel to the right more than the previous. It could also be constructed via a pattern of alternating line lengths. An example of this is creating a line that alternates between 2px and 3px-wide segments, each rising 1px higher than the last. These alternating lines are used sparingly due to the lack of aesthetic smoothness compared to the former type.
Curves are a bit trickier, but are still easily doable. Curves are created via a pattern of progressively shifting segment lengths that create a smooth shift in one direction to another. For example, say there's a vertical line and a horizontal line that needs connecting. A straight diagonal could do the trick, though that would create a polygonal feel to it. In order to make it more smooth and natural, a curve could be utilized instead by:
- starting with a 4px-long segment up,
- then a 2px segment up,
- then a 2px long diagonal up and to the right,
- then a 2px segment right,
- and finally a 4px segment right.
These sort of curves are also apparent at bigger pencil sizes (8px, 16px, etc.) and in the circle shape tool.
When thinking of lines in this way, there are two very common mistakes beginners tend to make. The first are
doubles, or
hanging pixels: pixels that are attached to and arbitrarily increase the thickness of a line. Doubles are most apparent on 1px wide lines as the line suddenly doubles in its thickness, hence the term doubles. An easy way of dealing with doubles in certain programs is turning on the "pixel perfect" option on the pencil. Should a program not have that option, however, it is easy to spot out doubles and erase them with the eraser tool; just erase the line to the point where the line is a consistent 1px thickness throughout.
Jaggies are also in the same vein as doubles and just as common. These are segments within pixel lines that fail to conform with the pattern of pixel lengths a line has throughout. Let's give an example: say there is a diagonal line made out of 2px long segments. Then, suddenly, WHAM! One of the segments is 3px long and the one following that is a single pixel. If the intent was to make a straight line, then this jaggy completely throws off the balance of the entire line. It's easy to fix these too, since they're so easy to spot usually: just shift the off-kilter pixel over so that the pattern is fixed. Huzzah!
Of course, there are other problems with beginner pixel art. However, these are the two most prevalent problems with beginner pixel art and the two that impact pixel art the most. Knowing about and overcoming these will at least help your pixel art become aesthetically cleaner and smoother.
Exercises
Now that we've tried out pixel art for just a little bit, try these exercises on your own! Use the questions they pose as critical thinking for during or after the exercise.
- Create a piece of pixel art at 64x64 pixels; after you're done, try recreating that piece at 32x32 pixels. Note what differences you notice between both versions while you're either making the second piece or observing the two comparatively after you are finished. What solutions did you take in adapting the piece?
- Create a shape using an odd number of lines higher than 3. Make sure the shape is as symmetrical as possible. (i.e. make sure it's not lopsided) What do you notice about the segments of the lines? Could the shape be smoother, and if so, why and how?
- Take a sprite from a well-known video game and, WITHOUT TRACING IT, try to recreate it to the best of your abilities. What did you notice about the lines and form of the original sprite during your attempt?
PDaU - Palettes, Dithering, and You!
Of course, pixels aren't just the squares that come together to make circles. It also has a lot to do with the palletes used and how they're used within a piece.
Palettes
A
palette is a set of colors that an art piece, digital or otherwise, uses. For example, painters use a palette of colors for their paintings; in a very similar way, pixel artists use a palette of colors for their pieces. However, this practice more stems from the technical limitations computers and game consoles had back then than from the fine arts practice. (more info in the
Technical Limits section)
Palettes in pixel art are often measured in either colors or bits. Colors are obvious as it plainly refers to how many colors are in a palette - for example, a 6-color palette.
A
bit, on the other hand, refers to a binary bit. An
x-bit palette often refers to palettes that are either monochrome or use 2
x colors. However, it can also refer to the device the palette originates from. For example, a 1-bit monochromatic palette only has black and white, while a 3-bit greyscale palette has 8 shades of grey; however, despite technically not being a palette that can be described under bits (having 54 colors total), the NES/Famicom palette is often described as an 8-bit palette.
Where to Find Palettes
There are a multitude of ways to pick a palette for pixel art. Of course, you can do it the old fashioned way and hand pick yourself a couple of nice colors to use. However, others have also made palettes that work well for pixel art and it's totally acceptable to pick from these palettes.
Built-in Palettes - Programs such as Aseprite often have a built in palette chooser and list of presets to choose from. Often, these are a mix of popular system and artist-made palettes.
LoSpec's Palette List - LoSpec is a pixel art community that has a user-submitted palette list, complete with filtering by number of colors. Each palette can be downloaded in a number of file formats including PNG image (.png), GIMP palette (.gpl), Photoshop palette (.ase), and hexidecimal code file. (.hex)
Good 'ol Wikipedia - The internet's biggest encyclopedia has a surprisingly in-depth list of different palettes, ranging from greyscales to retro computers. The page can be viewed
here, with subpages leading you to more in-depth diagrams of the palettes.
Dithering
Often at first, beginners will struggle with some of the more limiting palettes due to their lack of color choices. For example, let's say you have a palette of cyan, magenta and yellow - alongside black and white - but you want to convey a color that isn't any of those. At first, you think of adding a new color, but the bitpack specifically states, "Adding a new color to this palette is illegal." How does one overcome this predicament?
A common solution to this is the use of
dithering; the patterned scattering of pixels of different colors together to create the illusion of additional color depth. The human eye can only process as much as it can; any more and it starts blending things together. This is what dithering takes advantage of in order to create that additional color depth illusion. Dithering can be done a multitude of ways, though the most common type seen in beginner pixel art stems from the Bayer dithering method, in which pixels of two different colors are mixed in alternating diagonal patterns in order to mix them together. This method is recognizable from the cross-hatch effect it creates.
Let's return to that scenario from the beginning: we can only use 5 colors - black, white, cyan, magenta, and yellow - but want new ones to use. Now with the knowledge of dithering in mind, we can simply dither the cyan and yellow pixels together to get green! We can dither cyan and magenta to get indigo, and magenta and yellow to get vermillon as well. We can also dither a portion of two adjacent areas of magenta and white pixels to create a gradient from one color into the other.
Dithering, especially using creative dithering patterns, is great for conveying color gradients and textures. However, it should not overtake a piece. Dithering overuse tends to make a piece much noisier than it sensibly should be, which leads to a more cluttered piece overall. It also happens to be a common mistake among novice pixel artists as dithering (understandably) seems to be an all-solution to them, especially for those transitioning from digital artwork.
Exercises
Now that we have dithering and palettes explained, here are some exercises for test that knowledge!
- Take two colors and try to create a dithering pattern in between them. What did you notice about the dithering pattern you created? How effectively does it act as a gradient? How can you improve from this first attempt?
- Make a piece of pixel art in 2-bit greyscale, regardless of size; take a copy of that and convert it into 1-bit monochromatic. Note what differences you notice between both versions while you're either making the second version or observing the two comparatively after you are finished. What methods did you come up with in converting the piece? How much dithering did you use and how did it enhance the converted piece?
- Go to a palette site such as LoSpec and grab 2 palettes; one 2-bit (4 colors) and one 3-bit. (8 colors) Compare the two of them. What about each of them is different from the other? What does the color choices in either of them say about their priorities as a palette? (i.e, is the palette emphasizing aesthetics or functionality?)
SpTW - Sprite the World
When most people think about pixel art, 'sprite' is the first thing to come to mind. That only begs the question...why are pixel artists and their fans of English folklore?
Sprites and Tiles
Sprites and
tiles are common lexicon within both retro gaming and pixel art circles. They both refer to small, square bitmaps with which computers and consoles integrate into a larger scene of, most often, a 2D or 2.5D game. To be specific, sprites refer to the bitmaps that move across the screen and interact with the environment. Tiles, on the other hand, are a part of environment design and either go into the background or foreground.
Sprites are essentially the action of the game, while tiles form the environment. Some of the most well known pieces of pixel art in the general public are sprites from 1990's games - primarily those by Capcom, Konami, Nintendo, etc. In turn, lots of pixel artists center themselves around either creating gameplay sprites or level environments, landing jobs in the games industry off of those efforts. However, that's another article for another site.
Practically speaking, sprites are helpful in that they can help arrange a set of pre-set poses for animation, thus speeding up the process of those more. (seek
the peak for more info!) In addition, tiles can be strategically placed and repeated in a piece in order to construct a believable environment. Together, the creative restraint of the sprite itself - a combination of a limited palette and typically small scale - gives someone the opportunity to develop their creative thinking and pixel art skills. While not all pixel art pieces necessitate the use of sprites, it is helpful to know how to do them in the case you need to make some.
There is more to talk about regarding sprites and tiles, though that will be saved for the
Technical Limits unit. Until then, let's move on to...
Sprite Sheets
A useful tactic when making sprites is to create a
sprite sheet. These are large images containing all of the sprites you've made, compiled to in boxes and ready for you or anyone else to utilize. Tiles also often have sheets similar to these, called
tile maps. These are everywhere: from sprite ripping sites to art sharing platforms, sprite sheets and tile maps are unavoidable.
This is due mainly to their immediate utility as a reference to pull from. Often, there will be a mass of sprites made for a single character or tiles to represent a single environment. Thus, being able to access them from a single file is comparable rather than sifting through a folder or animation timeline with dozens if not hundreds of individual files.
Exercises
Now that you know more about sprites, take these exercises into consideration!
- Take a character you enjoy or an original design of yours and create a sprite sheet for them, consisting of 24x24 sprites at maximum. Specifically, create sprites for them standing, running, jumping, and doing one other action of your choice. (e.g, attacking, dying, etc.) What did you notice in creating these sprites? Was there anything within the process of making sprites that stood out to you as being difficult, interesting, or otherwise noteworthy?
- Create a tile map of 8x8 or 16x16 tiles for an environment and use them to construct a scene of at least 12x12 tiles. The theme of the environment is up to you. What about the nature of tiles drove you to the choices you made? How do the tiles you made work together to convey the scene you imagined?
TLHH - Technical Limits and How to Harness Them
Pixel art would not be where it is today had it not been for the limitations that forced them to be. In fact, pixel art might've never existed had it not been for them.
Computers and Game Consoles
Let's start with a general overview. In the 1950's, computers were room-sized behemoths that made a fuck ton of noise, often had a print-out display and maybe an oscilloscope, and only resided in university research centers. That's because all of their logic was stored in vacuum tubes, often taking up walls upon walls at a time due to their size. Of course, as time went on, these became smaller and more efficient; you can thank the transistor's increase in accessibility for a lot of that. By the time the 1970's rolled around, computers and other devices with transistors were starting to proliferate to the point of being in bars and laundromats.
Enter: the arcade video game. Since their dawn with Computer Space in 1971, arcade games have always used
raster graphics which displayed graphics as a grid of lights or pixels across a CRT, then called
bitmaps. This was opposed to
vector graphics, which directly drew the points, lines, curves and polygons across the screen instead. While vector graphics were used for some games, but they were primarily relegated to more analytical uses as well oscilloscopes and radar displays. Raster displays and bitmaps were popularized in computing with the Xerox Alto in the early 1970s and - with the exception of those vector arcade games and the Vectrex in 1982 - have been the standard ever since.
However, that speaks nothing of the initial limitations the hardware of the time had. The 1970's were a wild west era for raster graphics: anything beyond greyscale wasn't standard until the end of the decade. Pixels in games were as big as tiles on the NES. The only workstation with a raster display might could have
bankrupted your entire company if you bought it. From here, these limitations came to define pixel art as we know it today, despite easing up over those years.
Palette Limitations
In the beginning, there was only black and white; a pixel was either on or off. This would later evolve into the first greyscale palettes out with
Basketball (1974) and
Western Gun (1975) being some of the earliest examples. Even then, 1-bit games continued to proliferate -
Gun Fight, Midway's refactoring of Western Gun, is an example. These are the origins of the palette restrictions most pixel artists use today, and they continued right up until the 6th generation of portable consoles - all the way into the mid 2000's.
Graphics processors and displays were never perfect, especially back in the dawn of gaming. You really needed to conserve and make use of the colors you were afforded back then because, unlike palettes of today, you couldn't swap them for new ones. Let's take the ColecoVision's specifications (linked
here and
here) as an example. The ColecoVision used the Texas Instruments TMS9918, a common graphics chip when it released in 1982 and one that was an aesthetic powerhouse compared to the rest of the marked by then. The TMS9918 displayed at a resolution of 256x192 and had 15 shades of color and a transparency shade. One key limitation that it had was that sprites could only be 1 color, though there were ways developers got around that. (see next section)
Other consoles of the 1980's faced similar limitations, though not to the extent of the ColecoVision's. The
NES/Famicom palette sets were limited to 3 colors and a transparency color, with the whole palette of the system being 54 unique colors. (64 total colors - 10 redundant colors) These palette limitations helped to define the design and appearance of some of that console's most iconic characters.
Another particularly interesting example of palette limitations is the Game Boy and its enhancements. The DMG-001 and its revisions, the MGB-001 "Pocket" & MGB-101 "Light" respectively, were only limited to a 2-bit greyscale palette. This would later be upgraded with the
Super Game Boy in 1994, which would allow for a limited amount of color. Specifically, the first 4 out of 8 palettes the Super Game Boy had would be allocated to the game itself, with each one being assigned to either an 8x8 tile on the game screen or onto the sprite layer itself. The rest of those palettes are assigned to the Super Game Boy border, a bitmap that surrounded a game and was often customized in games that had SGB enhancements.
Sprite Limitations
Let's go back to sprites and tiles. The first game to have sprites of any kind was 1974's Basketball; the first game with animated sprites was Atari's
Shark Jaws in 1975. Since then, sprites have been inextricably linked with video games. With the genesis of sprites came the organization and processing of them, which often necessitated the need for techniques to get more out of the hardware.
One limitation was the amount of
video random access memory or
VRAM available in a console. The smaller it was, the less sprites and tiles it could hold and subsequently the more they needed to be reused on a screen. For instance, the NES/Famicom had
2kb of VRAM within its PPU (Picture Processing Unit) while the Genesis/Mega Drive had
64kb of VRAM within its VDP (Video Display Processor), 32 times the amount of the former. Often, this limitation was offset by cartridges having their own banks of
VROM (video read-only memory) to draw from, though both did limit the amount of complexity in the rendered graphics.
Another common limitation was
sprite limits, the amount of sprites the processor can display at once. Drawing from the comparison above again, the NES can only have 64 sprites on screen and 8 on a scanline while the Genesis can have 80 on screen and 20 on the same scanline. What determines what is rendered on a scanline and what isn't is known as
screen priority and, on consoles like the NES, those with lower priority are not rendered should a single scanline exceed its limit. A common technique for fitting more sprites on screen is
sprite flickering, where the game rapidly alternates the priority of sprites in order to fit them all on screen. This is most commonly seen in the NES Mega Man games, where sprite flicker was constant.
Sprites themselves were limited in size and palette as well. On the NES, sprites could be either
8x8 only or 8x16 only and only had as many colors as a palette could allow them. (see previous section) For character such as Super Mario and Mega Man, this would and often did necessitate the usage of
meta sprites, large sprites made from multiple smaller sprites. For example, an idle Big Mario in Super Mario Bros 1 is made up of a meta sprite consisting of 2x4 sprites. An idle Mega Man from the NES games consists of 10 sprites - 9 of them using one palette to construct his body, and 1 to put his face in the helmet using another palette.
Replicating Those Limits
Replicating the limits of old computers and game consoles has its advantages. For one, authentically recreating the limitations of something gives it more 'realism' in the context of the image itself; for example, recreating the NES limitations for a mock-up NES screenshot lends your piece a sense of realism in regards to its context. Another advantage is that it helps develop your skills as a pixel artist. Being faced with the limitations that actual artists had to deal with back then allows you to critically think when making a piece, thus building knowledge and forming habits and solutions for future pieces. Finally, it allows you to better appreciate other pieces of pixel art, knowing why and how it came to be.
Onto the topic of actually recreating them, there are a number of ways. One way of doing it is imposing the restrictions onto yourself manually. Many pixel art programs come in with a built in grid that can be set at any size, so one could keep the limitations of a certain console in mind or on a text file and work like that. Another way is by using a program for that specific purpose.
NEXXT is one such program that emulates the limitations of the NES PPU and has its own format on BotB.
Exercises
With those limitations in mind, use these exercises to get more comfortable with them!
- On your own (meaning: no AI), search up the technical specifications of two consoles, dated before 1994 (if they're a home console) or 2004. (if they're a portable console) In particular, search for the graphical specifications of those consoles (palette, VRAM, sprite limit, etc.) and take note which year they came out. You may also view footage of games from both consoles in order to see their graphical capabilities in action. What differences do you notice between the two you chose? How do certain aspects from one console compare and contrast to the other? What conclusion can you infer from comparing these two, depending on when they came out, and predecessor and successor or as competition against one another?
- Make a pixel art scene using a program such as NEXXT. Use as many functions of the program as you can while making it. What carried over from your usual workflow with your pixel art program of choice into this piece? What solutions or compromises did you take in your piece?
PotS - Peak of the Summit
Alright, the kid gloves are coming off. Time for you to learn some of the principles of high-end pixel art! Hold on tight, though; it's a rocky road right up ahead!
Subgenres
Believe it or not, there are subgenres and certain art styles of pixel art. Considering the multitude of methods one can create pixel art with, it's not a surprise some of these have branched off from pixel art as a whole. Some of these, in fact, have their own format on Battle of the Bits! Some of the most popular are...
Isometric Pixel Art
Isometric pixel art is a style of pixel art that heavily utilizes isometrically projected cubes and forms in order to create depth within a piece. This style originated with games like Q*bert and Zaxxon, both some of the earliest examples of three-dimensional projection in a video game. Later on, it was utilized for games such as Marble Madness, SimCity 2000, Sonic 3D Blast and Tactics Ogre. This style has proved popular due to the ease at which 3D shapes can be constructed with it; it also often forgoes with perspective and embraces parallel projection instead, which perfectly meshes with pixel art's limitations.
Text Art
Text art is visual art formed via textual characters such as numbers and letters. While text art itself is its own medium, certain styles of text art descend from the same limitations and often pass as pixel art in their own right. A few examples of this include:
*
PETSCII art, using the standard character set found in Commodore's 8-bit home computers,
*
ANSI art, using the character set found in the code pages of IBM machines, and
*
Teletext art, using the palette, character set and functions of teletext decoders.
PicoCAD and PELOGEN
As of recently, fantasy computers including the PICO-8 and
TIC-80 have been becoming more popular due to both their novelty as a fully functional 80's era microcomputer and their use as a Lua development kit. In particular, the PICO-8 has gotten computer-aided drafting software in the form of Johan Peitz's
picoCAD and bitchunk's PELOGEN. While both are not on the level of professional-grade 3D modeling software, both programs have given users a way to create low poly three-dimensional models within the PICO-8. In particular, picoCAD also has the ability to texture models and export to GIF, making it the most relevantly featured of the two.
Animation
There's more information about this topic in general out on the internet, so we'll make this brief. You've heard of
animation before and, if you've read this far, chances are you've probably seen at least a couple of pixel animations before.
Pixel animations, sometimes known as
sprite animations, are what they say on the tin: animations done using the limitations of the pixel art medium. Historically, pixel art animations have done very well in majors, to the point where Galak see claimed in a previous iteration that it will, [sic] "garantee a first place in the current major's battle art and piss off non artistic Botbrs by easily beating music." Of course, it's not an Exodia situation, but a well-crafted animation can upend the site over it's sheer awesomeness and find itself easily among the top 7 overall.
Animation in pixel art, while potentially easier due to the simplicity of the art form, is still subject to the 12 Principles of Animation, as coined by Disney's Frank Thomas and Ollie Johnston. Those are:
1. Squash and Stretch - keeping an object's volume constant while altering the elongation and shape in order to convey gravity and impact
2. Anticipation - building up a movement's energy via animating preceeding movements like winding up
3. Staging - the elements of a scene including timing, camera angle, acting, camera postiion or setting that clarifies what is to happen
4. Straight Ahead or Pose-to-Pose - the two main methods of animating drawings, either by drawing each frame one by one or by animating key frames first before moving into the frames in between those keys
5. Follow Through and Overlapping Action - techniques that replicate the laws of physics in an animation through having loose body parts such as limbs and clothing maintain the momentum before returning to a resting position and using differential timing on the movement of loose body parts
6. Easing - accelerating and slowing the movements of objects in a way that makes those movements more natural
7. Arcs - the use of parabolic trajectory for the momentum of an object
8. Secondary Action - elements added to a character's movement in order to make the animation more complex while not overtaking the main action
9. Timing - the control of time between frames or sprites of a movement, used to the artist's intended effect
10. Exaggeration - an effect used to enhance and make the animation more interesting by exaggerating a movement (for example, making it more wild)
11. Solid Drawing - taking into account elements and characteristics of three-dimensional space - perspective, depth, shadow, anatomy, etc. - in order to create a deeper and more realistic drawing
12. Appeal - interesting or endearing characteristics exemplified to draw people's attention towards them
These 12 principles are essentially the core tenets most if not all animators live by. Pixel animation is no stranger to subscribing to these tenets, even if only partially; gameplay sprites in the 1990s, for instance, utilized many of those principles. Fighting game sprites utilize elements of anticipation, follow through, arcs and solid drawing in conjunction with the image's movement across the screen.
While this is tedious when starting off, especially given pixel art's nature of meticulous fine-tuning, there are ways to make it quicker, easier and less painful.
*
Sketch out your frames first. This is what traditional animators do as well, and it gives you a first shot at how you want to convey your character's movement. Another way of doing this is
using basic skeletons for the initial animation instead of sketches. That way, the sketching process has an easily definable skeleton to follow.
*
Create and use sprites. Explaining further from the
Sprites unit, sprites speed up the amount of time needed to animate action by having a set of premade motions ready for you to stage and time. Sprites are can also be reused as much as needed, essentially eliminating the sketching process for whole scenes if utilized. However, this usefulness completely depends on the nature of your animation and whether the usage of sprites would really benefit it.
*
Fine tune your animation while in the sketching process. Due to the stage's simplicity compared to the final, adjustments are way less time consuming to do during sketching - especially if the characters are basic skeletons. QC your animation in the sketching phase as much as you can.
*
Utilize your animation's timing to harness easing and timing. Aseprite, for example, has an animation timeline and options tailored for it under "Frame." Using a high constant frame rate (for example: 50ms (20fps), 33ms (~30fps), etc.) and copy-pasting your frames will allow you to achieve impactful and impeccable timing much faster than using variable frame rates.
*
Optimize your animation before you submit. It is possible that a pixel animation that hasn't been optimized will be too big for or even crash the site outright. Consider optimizing it through sites like
GIFGIFs or
Ezgif before submitting it, especially if the size nears the upload limit.
Exercises
Welp, you've scaled the peak. In honor of this, let's have these exercises be your most insightful yet.
- Remake the first thing you made as a part of these exercises or just from studying this guide. Do not replicate the original with your remake. Incorporate the things you have learned so far on this journey and go further with the remake than you initially could have with the original. After you're done, compare the two. How did learning what you did help transform the piece you did before? What elements or forms in the original did you interpret and redesign for the remake? Do you feel more comfortable or knowledgable with pixel art and if so, in what way(s)?
- Take a photo, comic, advertisement, or anything else you see and, without tracing, recreate or reinterpret it in pixel art. What lead you to this interpretation? How does it compare to the original, aesthetically and functionally? Which limits, aspects and/or styles of pixel art influenced your interpretation?
- Take the sprites of an 8-bit video game character. Analyze those sprites aesthetically and functionally. How well do these sprites convey the character and why? What choices from the artist of the sprite benefited towards the recognizability of the character? If there was anything you could improve about this sprite: what would it be, why would it be those, and how would you go about improving those aspect(s)? Should that last question apply, attempt to edit the sprite with the edits you have in mind, keeping within the limitations of the system the sprites originated on.
Additional Resources
Finally, here are some resources that will help you further in drawing pixel art. What's linked here ranges from further reading on pixel art and how to create it to examples from BotBrs to study from.
Tutorials
Saint11's Pixel Art Tutorials (EN) - An assortment of 512x512 tutorials by Celeste's pixel artist, Pedro "Saint11" Medeiros. Covers an absolute FUCK TON of topics from motion blur to modular animation and parallax!
Les Forges Pixel Art Course (EN) - OpenGameArt.Org's English Translation of Antoine "Fil Razorback" Gersant's pixel art tutorial on the now-defunct French-language les Forges. Covers some topics not covered here such as perspective, anti-aliasing, shading, etc.
Les Forges Cours de pixel art (FR) - There happens to be an archive of les Forges available for the public to download! Through here, you can find Gersant's pixel art tutorial in it's original language.
2D Will Never Die (EN) - personal website of pixel veteran Kiwi. Massive resource for pixel art history and tutorials, as well as links to even MORE resources.
BIT INK NES Graphics Tutorials (EN) - NES-accurate pixel art tutorials by Brazilian game dev and artist Mario Azevedo
Pixel Art Communities
A great way of learning more about pixel art is to study the art of those who do pixel art on the regular. Luckily, Battle of the Bits have those in spades! Though, you can probably search for those on your own. What isn't here are many other artists from other pixel art communities with examples to study from as well, and those will be linked here:
LoSpec - palette site from earlier. Has a huge pixel art community and a lot of resources on how to do pixel art. It also hosts the LoSpec Jam every year.
Pixel Joint - old-school pixel art community. Hosts an archive of interviews, projects and tutorials alongside weekly and monthly pixel art competitions.
Pixelation - archive of old-school pixel art forum. Contains a lot of discussion on pixel art from years passed.
Youtubers
Brandon James Greer (EN) - Well-known pixel art channel with a lot of really good pixel art tutorials and analysis videos. His channel was the one I stumbled upon during my own pixel journey and I'd highly recommend his tutorials.
Pixel Overload (EN) - Another pixel art Youtuber known for making a lot of tutorials and videos for artists
See Also
chipbattle_art (format)
nexxt (format)
pixel (format)
visuall (format)
